<template>
  <v-form v-model="valid" ref="myPathForm">
     <v-text-field v-model="path.id" label="" hidden   />
    <v-text-field v-model="path.pathCode" :counter="4" label="请输入路线编码" required :rules="nameRules"  />
    <v-text-field v-model="path.pathName" label="请输入路线简介" required  :rules="nameRules" />
<!--     <v-select  label='选择路线区域'/>-->
     <!-- <v-checkbox v-model="checkbox" :label="`启用`" ></v-checkbox> -->
  
 
    <v-layout class="my-4" row>
      <v-spacer/>
      <v-btn @click="submit" color="primary">提交</v-btn>
      <v-btn @click="clear">重置</v-btn>
    </v-layout>
  </v-form>
</template>

<script>
  export default {
    name: "path-form",
    props: {
      oldPath: {
        type: Object
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        valid: false, // 表单校验结果标记
        path: {
          pathName: '', // 
          pathCode: '', // 
          id: '',// 
          status: 0, // 
        },
        nameRules: [
          v => !!v || "内容不能为空",
        ],
        checkbox:false,
      }
    },
    methods: {
      submit() {
        // 表单校验
        if (this.$refs.myPathForm.validate()) {
          // 定义一个请求参数对象，通过解构表达式来获取path中的属性
          const {...params} = this.path;
          // 数据库中只要保存分类的id即可，因此我们对categories的值进行处理,只保留id，并转为字符串
          // params.cids = categories.map(c => c.id).join(",");
          // 将字母都处理为大写
          // params.letter = letter.toUpperCase();
          // 将数据提交到后台
          // this.$http.post('/item/brand', this.$qs.stringify(params))
          this.$http({
            method: this.isEdit ? 'put' : 'post',
            url: '/item/logistics/insertpath',
            data: JSON.stringify(params),
             headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
          }).then(() => {
            // 关闭窗口
            this.$emit("close");
            this.$message.success("保存成功！");
          })
            .catch(() => {
              this.$message.error("保存失败！");
            });
        }
      },
      clear() {
        // 重置表单
        this.$refs.myPathForm.reset();
      }
    },
    watch: {
      oldPath: {// 监控oldBrand的变化
        handler(val) {
          if (val) {
            // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
            this.path = Object.deepCopy(val)
          } else {
            // 为空，初始化brand
            this.path = {
              pathName: '',
              pathCode: '',
              id: '',
              status:0,
            }
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>
